<template>
    <view class="container orderdetails">
        <view class="header">
            <view class="nav-item" :class="nav == 1?'selacion':''" @click="nav = 1">基本信息</view>
            <view class="nav-item" :class="nav == 4?'selacion':''" @click="nav = 4">图库</view>
            <view class="nav-item" :class="nav == 2?'selacion':''" @click="nav = 2">道具清单</view>
            <view class="nav-item" :class="nav == 3?'selacion':''" @click="nav = 3">评论</view>
        </view>
        <view class="bbbm"></view>
        <view class="content">
            <uni-section class="mb-10" title="订单信息" type="line" v-show="nav == 1">
                <uni-card v-if="item">
                    <view class="list"><view class="title">订单类型：</view><view class="content">{{item.order_type}}</view></view>
                    <view class="list"><view class="title">订单编号：</view><view class="content">{{item.order_sn}}</view></view>
                    <view class="list"><view class="title">项目名称：</view><view class="content">{{item.project_name}}</view></view>
                    <view class="list"><view class="title">形象：</view><view class="content">{{item.image}}</view></view>
                    <view class="list"><view class="title">收货地址：</view><view class="content">{{item.address}}</view></view>
                    <view class="list"><view class="title">联系人：</view><view class="content">{{item.username}},{{item.phone}}</view></view>
                    <view class="list"><view class="title">负责人：</view><view class="content">{{item.head_user}}</view></view>
                    <view class="list"><view class="title">目前状态：</view><view class="content status_1">{{item.status_name}}</view></view>
                    <view class="list"><view class="title">项目进度：</view><view class="content status_1">{{item.total_progress}}%</view></view>
                    <view class="list"><view class="title">发货时间：</view><view class="content status_1">{{item.send_time || '待定'}}</view></view>
                    <view class="list"><view class="title">到货时间：</view><view class="content status_1">{{item.reach_time || '待定'}}</view></view>
                    <view class="list" v-if="item.guide_time"><view class="title">指导人员到店：</view><view class="content status_1">{{item.guide_time || '待定'}}</view></view>
                </uni-card>
            </uni-section>
            <template v-if="item && item.qa.length>=1">
                <uni-section class="mb-10" title="发车照片" type="line" v-show="nav == 1">
                    <view class="gbba">
                        <view class="grid-item-box imges"
                                    v-for="(v, i) in item.qa":index="i" :key="i"       
                        style="background-color: #fff;">
                            
                            <view class="imgone"  @click.native="showimg2(i,item.qa)">
                                <image :src="v" mode="widthFix" class=""></image>
                            </view>    
                          
                        </view>
                        
                       
                    </view>    
                    
                </uni-section>
            </template>
                
                
            <uni-section class="mb-10" title="图库" type="line" v-show="nav == 4 || nav == 1">
                <view class="gbba">
                    <uni-group :title="val.day" margin-top="20"  v-for="(val, index) in imgs":index="index" :key="index">
                        <view class="grid-item-box imges"
                                    v-for="(v, i) in val.child":index="i" :key="i"       
                        style="background-color: #fff;">
                            
                            <view class="imgone"  @click="showimg(i,val.child)">
                                <image :src="v.thumb" mode="widthFix" class=""></image>
                            </view>    
                            <view class="text" >
                            
                                <text>{{v.title || '未命名'}}</text>
                            
                            </view>
                        </view>
                    </uni-group>
                    
                   
                </view>    
                
            </uni-section>
            
            <uni-section class="mb-10" title="道具清单" type="line" v-show="nav == 2 || nav == 1">
                <uni-card>
                    <gridTable ref="gridTable" align="center" :proplist="proplist" :hasdel="false"></gridTable>
                </uni-card>
            </uni-section>
            <uni-section class="mb-10" title="评论" type="line" v-show="nav == 3 || nav == 1">
                <uni-card>
                   <uni-easyinput style="margin-bottom: 20rpx;" type="textarea" 
                   v-model="commonets" 
                   placeholder="请输入内容" @change="tocommonet"></uni-easyinput>
                   <view class="cmomentlist">
                        <template v-for="(val,index) in commentslist" >
                            <view class="lists bibibi">
                                <view class="headimg">
                                    <image :src="val.headimg"></image>
                                </view>
                                <view class="boxss">
                                    <view class="nicktime">
                                        <view class="nickname">{{val.nickname}}</view>
                                        <view class="timer">{{val.add_time}}</view>
                                    </view>
                                    <view class="thecontent">{{val.content}}</view>
                                    <view class="btns">
                                        <view class="rely bbc" @click="torely(val)">
                                            <uni-icons type="chat" size="20"></uni-icons>回复
                                        </view>
                                        <view class="del bbc" v-if="val.is_edit" @click="delrely(val.id,index,null)">
                                            <uni-icons type="trash" size="20"></uni-icons>删除
                                        </view>
                                    </view>
                                </view>
                             
                            </view>
                            <view class="lists relylist" v-if="val.relylist.length>=1">
                                <view class="relyItem" v-for="(v,ind) in val.relylist" :key="ind">
                                    <view class="headimg">
                                         <image :src="v.headimg"></image>
                                    </view>
                                    <view class="boxss">
                                        <view class="nicktime">
                                            <view class="nickname">{{v.nickname}}</view>
                                            <view class="timer">{{v.add_time}}</view>
                                        </view>
                                        <view class="thecontent">{{v.content}}</view>
                                        <view class="btns">
                                            <view class="rely bbc"  @click="torely(val)">
                                                <uni-icons type="chat" size="20"></uni-icons>回复
                                            </view>
                                            <view class="del bbc" v-if="v.is_edit" @click="delrely(v.id,index,ind)">
                                                <uni-icons type="trash" size="20"></uni-icons>删除
                                            </view>
                                        </view>
                                    </view>
                                </view>
                               
                            </view>
                        </template>
                       
                   </view> 
                </uni-card>
            </uni-section>
        </view>
        <view class="mask" v-if="relyboxshow" @click="relyboxshow = false"></view>
        <view class="relyinput" v-if="relyboxshow">
          
            <uni-easyinput class="iitt" v-model="relybox.content" @change="gocc" :placeholder="relyppp"></uni-easyinput>
        </view>    
    </view>
</template>

<script>
    import gridTable from '@/components/table.vue';
    import design from '@/components/design.vue';

    export default{
        name:"orderdetails",
        data(){
            return{
                nav:1,
                item:null,
                proplist:[],
                btns:[],
                design:{
                    data1:[],
                    data2:[],
                    data3:[]
                },
                dwgonepath:'',
                tuku:[],
                uploadimg:[],
                imgs:[],
                rename:'',
                reid:'',
                reindex:0,
                commonets:'',
                relyboxshow:false,
                relybox:{
                    reply_id:'',
                    content:'',
                    common_id:'',
                    cat:1,
                    to_uid:'',
                    is_reply:1
                },
                relyppp:'',
                commentslist:[],
                id:''
            }
        },
        components:{
            gridTable,design
        },
        watch:{
            'nav':function(newval){
                
            }
        },
        onLoad(option) {
            this.getontdata(option.oid)
            this.getproplist(option.oid)
            this.getDesign(option.oid)
            this.getimgs(option.oid)
            this.common_id = option.oid
            
        },
        onShow(){
            var _this = this
            uni.$on('thethumb',function(data){
                console.log('监听到事件来自返回的参数：' , data);
                // TODO 下面执行刷新的方法
                _this.getDesign(data)
                this.$refs.uploaddesign.close()
            })
            uni.$on('progress',function(data){
                _this.getontdata(data)
            })
            this.getcomments()
        },
        methods:{
            torely(item){
                this.relyppp = "回复:"+item.nickname
                this.relybox = {
                    reply_id:item.id,
                    content:'',
                    common_id:this.common_id,
                    cat:1,
                    to_uid:item.uid,
                    is_reply:1
                }
                this.relyboxshow = true
            },
            delrely(id,index,ind){
                var _this = this
                uni.showModal({
                    content:"是否去确认删除？",
                    success:function(res){
                        if (res.confirm) {
                            _this.$api.post(`comments/del`,{
                                id:id
                            }).then(()=>{
                                console.log("ind",ind)
                                if(ind!==null){
                                    _this.commentslist[index].relylist.splice(ind,1)
                                }else{
                                    _this.commentslist.splice(index,1)
                                }
                            })
                        } 
                    }
                })
                
            },
            getcomments(){
                this.$api.get(`comments/lists?id=${this.common_id}&cat=1`).then(({data})=>{
                    this.commentslist = data
                })
            },
            tocommonet(){
                if(!this.commonets){
                    this.$error("请输入评论内容")
                }else{
                    this.$api.post(`comments/add`,{
                        cat:1,
                        common_id:this.item.id,
                        content:this.commonets
                    }).then(()=>{
                        this.getcomments()
                    })
                }
            },
            gocc(){
                if(!this.relybox.content){
                    this.$error("请输入回复内容")
                }else{
                    this.$api.post(`comments/add`,this.relybox).then(()=>{
                        this.getcomments()
                        this.relyboxshow = false
                    })
                }
            },
            showimg(index,imgs){
                console.log(11)
                var imgs2 = []
                imgs.forEach((val)=>{
                    imgs2.push(val.thumb)
                })
                uni.previewImage({
                    urls:imgs2,
                    current:index,
                    complete:function(e){
                        console.log(e)
                    }
                    
                })
            },
            showimg2(index,imgs){
                console.log(11)
               
                uni.previewImage({
                    urls:imgs,
                    current:index,
                    complete:function(e){
                        console.log(e)
                    }
                    
                })
            },
            gotorename(){
                this.$api.post(`imgs/rename`,{id:this.reid,title:this.rename}).then(()=>{
                    this.imgs[this.reindex].title = this.rename
                    this.$refs.rename.close()
                })
            },
            showrename(id,title,index){
                this.rename = title
                this.reid = id
                this.reindex = index
                this.$refs.rename.open('bottom')
            },
            //下载中转单
            downtransfer(){
                var _this = this
                this.$api.get('excel/index?oid='+this.item.id).then(({data})=>{
                    uni.downloadFile({
                        url:data.url,
                        header:{
                          Authorization:uni.getStorageSync('nangtong_login_token')  
                        },
                        success:function(res){
                            console.log(res)
                            uni.saveFile({
                                tempFilePath:res.tempFilePath,
                                success:function(r){
                                    var savedFilePath = r.savedFilePath;
                                    uni.openDocument({
                                        filePath: savedFilePath,
                                        showMenu: true,
                                        success: function (res) {
                                          console.log('打开文档成功');
                                        }
                                    })
                                }
                            })
                        }
                    })
                })
                
            },
            gotoshowdwg(id){
               
                
            },
            btn(method){
                switch(method){
                    case "apply_design":
                        this.$confirm(`是否确定申请上传设计稿呢？`).then((res)=>{
                            this.$api.post(`design/apply`,{oid:this.item.id}).then(()=>{
                                this.$success('申请成功')
                                this.getontdata(this.item.id)
                            })
                        })
                        break;
                    case "prop_add":
                        this.$navto(`/pages/proplist/add?id=${this.item.id}&type=add`)
                        break;
                    case "upload_design":
                        this.$refs.uploaddesign.open('bottom')
                        break;
                    case "accept":
                        this.$confirm('是否确认接单呢？').then(()=>{
                            this.$api.post(`produce/accept`,{id:this.item.id}).then((res)=>{
                                this.getontdata(this.item.id)
                            })
                        })    
                        break;
                    case "progress":
                        this.$navto(`/pages/produce/progress?oid=${this.item.id}&total_progress=${this.item.total_progress}&plan_progress=${this.item.plan_progress}`)
                        break;
                    case "complete":
                        this.$confirm(`是否确认完成订单？`).then(()=>{
                            this.$api.post(`produce/complete`,{oid:this.item.id}).then(()=>{
                                this.item.status = 3
                                this.item.status_name = '已完成'
                                this.total_progress = 100
                                this.plan_progress = 100
                            })
                        })
                        break;
                    case "transfer":
                        this.$refs.transferbox.open('bottom')
                        break;
                    case "upload_img":
                        var _this =  this
                        uni.chooseImage({
                            count:9,
                            success:function(res){
                          
                                var array = []
                                res.tempFilePaths.forEach(function(val,index){
                                    array.push({
                                        name:'file_'+index,
                                        uri:val
                                    })
                                })
                               
                                uni.showLoading({
                                    title:'上传中...',
                                    mask:true
                                })
                                var uploadTask = uni.uploadFile({
                                    url:_this.$api.postURL+'imgs/upload',
                                    files:array,
                                    fileType:"image",
                                    name:"file",
                                    header:{
                                        Authorization:uni.getStorageSync('nangtong_login_token')
                                    },
                                    formData:{
                                        oid:_this.item.id
                                    },
                                    success: (uploadFileRes) => {
                                        var data = JSON.parse(uploadFileRes.data);
                                        
                                        if(data.code == 0){
                                            _this.$error(data.message)
                                        }else{
                                           _this.$success("上传成功") 
                                           _this.getimgs(_this.item.id)
                                        }
                                    },
                                    complete:function(){
                                     
                                        uni.hideLoading()
                                    }
                                })
                              
                            },
                            
                        })
                        break;
                }
            },
            getimgs(oid){
                this.$api.get(`imgs/lst2?oid=${oid}`).then(({data})=>{
                    this.imgs = data
                })
            },
            getDesign(id){
                this.$api.get(`design/getorderlist?oid=${id}`).then(({data})=>{
                    this.design = data
                    var _this = this
                   
                })
            },
            getproplist(id){
                this.$api.get(`prop/getlist1?oid=${id}`).then(({data})=>{
                    this.proplist = data.lists
            
                    var _this = this
                    setTimeout(function(){
                        _this.$refs.gridTable.updatetable()
                    },500)
                })
            },
            getontdata(id){
                this.$api.get(`order/orderItem?id=${id}`).then(({data})=>{
                    this.item = data.info
                    this.btns = data.btns
                })
            },
            openpop(ref){
                this.$refs[ref].open('center')
            },
            deldesign(id,lst,index){
                this.$confirm('是否确认删除选择的图纸').then(()=>{
                    this.$api.post(`design/del`,{
                        id:id
                    }).then((res)=>{
                        switch(lst){
                            case "1":
                                this.design.data1.splice(index,1)
                                break;
                        }
                    })
                })
            },
            delimg(id,index){
                this.$confirm(`是否确认删除？`).then(()=>{
                    this.$api.post(`imgs/del`,{id:id}).then(()=>{
                        this.imgs.splice(index,1)
                    })
                })

                
            }
        }
    }
</script>

<style lang="less" scoped>
    .container{
        padding-bottom: 100rpx;
    }
    .footer{
        background-color: #fff;
        display: flex;
        z-index: 99;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left:0;
        width: 100%;
        height: 110rpx;
        box-shadow: 0px 8rpx 30rpx 0 rgba(0, 0, 0, 0.2);
        .thebtn{
            height: 110rpx;
            line-height: 110rpx;
            text-align: center;
            position: relative;
            color: #3a3a3a;
            &:before{
                position: absolute;
                content: " ";
                width: 1px;
                height: 20rpx;
                background-color: #6a6a6a;
                top: 50%;
                margin-top: -10rpx;
                right: 0;
            }
            &:last-child{
                &:before{
                    display:none;
                }
            }
        }
        .disable{
            color: #f3a73f;
            background-color: #c7c9ce;
        }
    }
    .status_1{
        color: #18bc37;
    }
    .list{
        display:flex;
        align-items: center;
        .title{
            width: 35%;
            text-align: right;
            font-weight: bold;
        }
        .content{
            width: 65%;
            display: flex;
            justify-content: end;
            text-align: right;
        }
    }
    .bbbm{
        height:calc(var(--status-bar-height) + 100rpx) ;
    }
    .header{
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(var(--status-bar-height) + 80rpx);
        left: 0;
        z-index: 99;
        .nav-item{
            width: 180rpx;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            color: #9B9BA3;
        }
        .selacion{
            color: #000000;
            font-weight: 800;
            position: relative;
            &::before{
                content:" ";
                position: absolute;
                width: 82rpx;
                height: 4rpx;
                background: #52A0F3;
                border-radius: 2rpx;
                bottom: 0;
                left: 50%;
                margin-left: -41rpx;
            }
        }
    }
    .imgone{
        width: 60rpx;
        height: 60rpx;
    }
    .image {
    	width: 25px;
    	height: 25px;
    }
    
    .text {
    	font-size: 14px;
    	margin-top: 5px;
    }
    
    .example-body {
    	/* #ifndef APP-NVUE */
    	// display: block;
    	/* #endif */
    }
    
    .grid-dynamic-box {
    	margin-bottom: 15px;
    }
    
    .grid-item-box {
    	flex: 1;
    	// position: relative;
    	/* #ifndef APP-NVUE */
    	display: flex;
    	/* #endif */
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	padding: 15px 0;
        position: relative;
        .radio{
            position: absolute;
            width: 44rpx;
            height: 44rpx;
            top: 5rpx;
            right: 5rpx;
            z-index: 9;
        }
    }
    
    .grid-item-box-row {
    	flex: 1;
    	// position: relative;
    	/* #ifndef APP-NVUE */
    	display: flex;
    	/* #endif */
    	flex-direction: row;
    	align-items: center;
    	justify-content: center;
    	padding: 15px 0;
    }
    
    .grid-dot {
    	position: absolute;
    	top: 5px;
    	right: 15px;
    }
    
    .swiper {
    	height: 420px;
    }
    
    /* #ifdef H5 */
    @media screen and (min-width: 768px) and (max-width: 1425px) {
    	.swiper {
    		height: 630px;
    	}
    }
    
    @media screen and (min-width: 1425px) {
    	.swiper {
    		height: 830px;
    	}
    }
    
    /* #endif */
    
    .btns_1{
        .thebtn{
            width: 100%;
        }
    }
    .btns_2{
        .thebtn{
            width: 50%;
            &:nth-child(1n){
            	position: relative;
                &:before{
                    position: absolute;
                    content: " ";
                    
                }
            }
        }
    }
    .btns_3{
        .thebtn{
            width: 33%;
            &:nth-child(3n){
            	position: relative;
                &:before{
                    position: absolute;
                    content: " ";
                    
                }
            }
        }
    }
    .btns_4{
        .thebtn{
            width: 25%;
            &:nth-child(4n){
            	position: relative;
                &:before{
                    position: absolute;
                    content: " ";
                    
                }
            }
        }
    }
    .upload_design{
        width: 100%;
        height: 180rpx;
        display: flex;
        align-items: center;
        box-shadow: 0px 8rpx 30rpx 0 rgba(0, 0, 0, 0.2);
        background-color: #fff;
        .onelow{
            height: 180rpx;
            display: flex;
            align-items: center;
            width: 25%;
            position: relative;
            .xx{
                width: 100%;
                
                text-align: center;
                font-size: 24rpx;
                image{
                    width: 82rpx;
                    margin: 0 auto;
                }
                
            }
            
          
        }
    }
    .dwg{
        width: 30rpx;
        height: 30rpx;
    }
    .dwgstr{
        font-size: 24rpx;
        color: #2979ff;
    }
    .red{
        text-align: center;
    }
    .blur{
        text-align: center;
    }
    .gbba{
        padding-left: 12rpx;
       .imges{
           width: 180rpx;
           height: 200rpx;
           display: inline-block;
           text-align: center;
           border-right: 1px solid #c7c9ce;
           border-bottom: 1px solid #c7c9ce;
           position: relative;
           overflow: hidden;
           &:nth-child(4n){
           	border-right: none;
           }
           .close{
               position: absolute;
               top: 5rpx;
               right: 0rpx;
               z-index: 99;
           }
           .imgone{
               width: 140rpx;
               height: 140rpx;
               margin: 0 auto;
               overflow: hidden;
            
               image{
                   width:100%;
               }
           }
       } 
    }
    .bigmomu{
        height: 1.4em;
    }
    .cmomentlist{
        width: 100%;
        .lists{
            width: 100%;
        
            margin-bottom: 20rpx;
            .headimg{
                width: 80rpx;
                height: 80rpx;
                background-color: #c7c9ce;
                border-radius: 15rpx;
                overflow: hidden;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .boxss{
                width: 508rpx;
                margin-left: 20rpx;
                .nicktime{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .nickname{
                        color: #2979ff;
                        font-size: 28rpx;
                    }
                    .timer{
                        font-size: 24rpx;
                        color: #c7c9ce;
                    }
                }
                .thecontent{
                    margin-top: 20rpx;
                    font-size: 28rpx;
                    color: #8f939c;
                }
                .btns{
                   display: flex;
                   margin-top: 20rpx;
                    .bbc{
                        display: flex;
                        font-size: 24rpx;
                        align-items: center;
                    }
                    .del{
                        margin-left: 20rpx;
                    }
                }
            }
            
        }
        .bibibi{
            display: flex;
        }
        .relylist{
            
            width: 560rpx;
            margin-left: 40rpx;
            background-color: #f0f0f0;
            border-radius: 10rpx;
            padding: 10rpx;
            .headimg{
                background-color: #fff;
            }
           .relyItem{
               display: flex;
               margin-bottom: 20rpx;
               .boxss{
                   width: 458rpx;
               }
           } 
        }
    }
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(#000,0.4);
        z-index: 100;
    }
    .relyinput{
        position: fixed;
        width: 100%;
        height: 80rpx;
        background-color: #fff;
        left: 0;
        bottom: 0;
        padding: 10rpx 5rpx;
        z-index: 101;
        .iitt{
            width: 700rpx;
            margin: 0 auto;
        }
    }
</style>